"use strict";

function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }

function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

/**
 * @desc 一个轮播插件 
 * @author Mxsyx (zsimline@163.com)
 * @version 1.0.0
 */
var Lb =
/*#__PURE__*/
function () {
  function Lb(options) {
    _classCallCheck(this, Lb);

    this.lbBox = document.getElementById(options.id);
    this.lbItems = this.lbBox.querySelectorAll('.lb-item');
    this.lbSigns = this.lbBox.querySelectorAll('.lb-sign li');
    this.lbCtrlL = this.lbBox.querySelectorAll('.lb-ctrl')[0];
    this.lbCtrlR = this.lbBox.querySelectorAll('.lb-ctrl')[1]; // 当前图片索引

    this.curIndex = 0; // 轮播盒内图片数量

    this.numItems = this.lbItems.length; // 是否可以滑动

    this.status = true; // 轮播速度

    this.speed = options.speed || 600; // 等待延时

    this.delay = options.delay || 3000; // 轮播方向

    this.direction = options.direction || 'left'; // 是否监听键盘事件

    this.moniterKeyEvent = options.moniterKeyEvent || false; // 是否监听屏幕滑动事件

    this.moniterTouchEvent = options.moniterTouchEvent || false;
    this.handleEvents();
    this.setTransition();
  } // 开始轮播


  _createClass(Lb, [{
    key: "start",
    value: function start() {
      var event = {
        srcElement: this.direction == 'left' ? this.lbCtrlR : this.lbCtrlL
      };
      var clickCtrl = this.clickCtrl.bind(this); // 每隔一段时间模拟点击控件

      this.interval = setInterval(clickCtrl, this.delay, event);
    } // 暂停轮播

  }, {
    key: "pause",
    value: function pause() {
      clearInterval(this.interval);
    }
    /**
     * 设置轮播图片的过渡属性
     * 在文件头内增加一个样式标签
     * 标签内包含轮播图的过渡属性
     */

  }, {
    key: "setTransition",
    value: function setTransition() {
      var styleElement = document.createElement('style');
      document.head.appendChild(styleElement);
      var styleRule = ".lb-item {transition: left ".concat(this.speed, "ms ease-in-out}");
      styleElement.sheet.insertRule(styleRule, 0);
    } // 处理点击控件事件

  }, {
    key: "clickCtrl",
    value: function clickCtrl(event) {
      if (!this.status) return;
      this.status = false;

      if (event.srcElement == this.lbCtrlR) {
        var fromIndex = this.curIndex,
            toIndex = (this.curIndex + 1) % this.numItems,
            direction = 'left';
      } else {
        var fromIndex = this.curIndex;
        toIndex = (this.curIndex + this.numItems - 1) % this.numItems, direction = 'right';
      }

      this.slide(fromIndex, toIndex, direction);
      this.curIndex = toIndex;
    } // 处理点击标志事件

  }, {
    key: "clickSign",
    value: function clickSign(event) {
      if (!this.status) return;
      this.status = false;
      var fromIndex = this.curIndex;
      var toIndex = parseInt(event.srcElement.getAttribute('slide-to'));
      var direction = fromIndex < toIndex ? 'left' : 'right';
      this.slide(fromIndex, toIndex, direction);
      this.curIndex = toIndex;
    } // 处理滑动屏幕事件

  }, {
    key: "touchScreen",
    value: function touchScreen(event) {
      if (event.type == 'touchstart') {
        this.startX = event.touches[0].pageX;
        this.startY = event.touches[0].pageY;
      } else {
        // touchend
        this.endX = event.changedTouches[0].pageX;
        this.endY = event.changedTouches[0].pageY; // 计算滑动方向的角度

        var dx = this.endX - this.startX;
        var dy = this.startY - this.endY;
        var angle = Math.abs(Math.atan2(dy, dx) * 180 / Math.PI); // 滑动距离太短

        if (Math.abs(dx) < 10 || Math.abs(dy) < 10) return;

        if (angle >= 0 && angle <= 45) {
          // 向右侧滑动屏幕，模拟点击左控件
          this.lbCtrlL.click();
        } else if (angle >= 135 && angle <= 180) {
          // 向左侧滑动屏幕，模拟点击右控件
          this.lbCtrlR.click();
        }
      }
    } // 处理键盘按下事件

  }, {
    key: "keyDown",
    value: function keyDown(event) {
      if (event && event.keyCode == 37) {
        this.lbCtrlL.click();
      } else if (event && event.keyCode == 39) {
        this.lbCtrlR.click();
      }
    } // 处理各类事件

  }, {
    key: "handleEvents",
    value: function handleEvents() {
      // 鼠标移动到轮播盒上时继续轮播
      this.lbBox.addEventListener('mouseleave', this.start.bind(this)); // 鼠标从轮播盒上移开时暂停轮播

      this.lbBox.addEventListener('mouseover', this.pause.bind(this)); // 点击左侧控件向右滑动图片

      this.lbCtrlL.addEventListener('click', this.clickCtrl.bind(this)); // 点击右侧控件向左滑动图片

      this.lbCtrlR.addEventListener('click', this.clickCtrl.bind(this)); // 点击轮播标志后滑动到对应的图片

      for (var i = 0; i < this.lbSigns.length; i++) {
        this.lbSigns[i].setAttribute('slide-to', i);
        this.lbSigns[i].addEventListener('click', this.clickSign.bind(this));
      } // 监听键盘事件


      if (this.moniterKeyEvent) {
        document.addEventListener('keydown', this.keyDown.bind(this));
      } // 监听屏幕滑动事件


      if (this.moniterTouchEvent) {
        this.lbBox.addEventListener('touchstart', this.touchScreen.bind(this));
        this.lbBox.addEventListener('touchend', this.touchScreen.bind(this));
      }
    }
    /**
     * 滑动图片
     * @param {number} fromIndex
     * @param {number} toIndex 
     * @param {string} direction
     */

  }, {
    key: "slide",
    value: function slide(fromIndex, toIndex, direction) {
      var _this = this;

      if (direction == 'left') {
        this.lbItems[toIndex].className = "lb-item next";
        var fromClass = 'lb-item active left',
            toClass = 'lb-item next left';
      } else {
        this.lbItems[toIndex].className = "lb-item prev";
        var fromClass = 'lb-item active right',
            toClass = 'lb-item prev right';
      }

      this.lbSigns[fromIndex].className = "";
      this.lbSigns[toIndex].className = "active";
      setTimeout(function () {
        _this.lbItems[fromIndex].className = fromClass;
        _this.lbItems[toIndex].className = toClass;
      }.bind(this), 50);
      setTimeout(function () {
        _this.lbItems[fromIndex].className = 'lb-item';
        _this.lbItems[toIndex].className = 'lb-item active';
        _this.status = true; // 设置为可以滑动
      }.bind(this), this.speed + 50);
    }
  }]);

  return Lb;
}();
